<!--  -->
<template>
  <div>
      <div class="order_Search_box">
        <div>
              
              <el-col>订单号：<el-input v-model="ordercode" placeholder="请输入订单号"></el-input></el-col>
        </div>
        <div>
              
              <el-col>收货人：<el-input v-model="addressname"   placeholder="请输入名字"></el-input></el-col>
        </div>
        <div>
            <span>订单状态：</span>
        <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        
        
        </div>
        <div>
            <el-button type="primary" @click="q_search(ordercode,addressname,value,currentPage)" icon="el-icon-search">搜索</el-button>
        </div>

      </div>
     
    <div>
            
            
  <!-- <el-table
    :data="order"
    style="width: 100%">
    <el-table-column
    align="center"
      label="订单信息">
      <template slot-scope="scope">
         
      <el-image :src="scope.row.imgas"></el-image>
      </template>
    </el-table-column>
     <el-table-column
    align="center"
    label="商品信息">
      <template slot-scope="scope">
          
          <p>{{scope.row.spname}}</p>
            <p>单价：￥{{scope.row.order_goods_price}}</p>
      </template>
    </el-table-column>
        <el-table-column
    align="center"
    label="订单号">
      <template slot-scope="scope">
          <p>{{scope.row.order_code}}</p>
            
      </template>
    </el-table-column>
    <el-table-column
    align="center"
      label="收货人">
      <template slot-scope="scope">
        <p>{{scope.row.user_id}}</p>
          
        
      </template>
    </el-table-column>
  <el-table-column
  align="center"
      label="订单数量"
      >
      <template slot-scope="scope">
       <p>{{scope.row.order_goods_num}}</p>
      </template>
    </el-table-column>
 <el-table-column
 align="center"
      label="订单总价"
      >
      <template slot-scope="scope">
       <p>￥{{scope.row.order_goods_price*scope.row.order_goods_num}}</p>
      </template>
    </el-table-column>

    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table> -->



  <div class="tbhead_head">
      <div class="w40 tbhead"><span >订单信息</span></div>
      <div class="w12 tbhead"><span>单价</span></div>
      <div class="w12 tbhead"><span>数量</span></div>
      <div class="w12 tbhead"><span>实付款</span></div>
      <div class="w12 tbhead"><span>交易状态</span></div>
      <div class="w12 tbhead"><span>操作</span></div>
  </div>

  <div class="tb_tybd" v-for="(item) in order" :key="item.orderId">

    <div class="tbhead_head">
    <div class="tbhead"><p>订单号：{{item.orderCode}}</p></div>
    <div class="tbhead" v-if="item.orderType==0"><p>订单类型：团购</p> </div>
    <div class="tbhead" v-if="item.orderType==1"><p>订单类型：普通订单</p> </div>
    <div class="tbhead" v-if="item.orderType==2"><p>订单类型：助力订单</p> </div>
    <div class="tbhead" v-if="item.orderType==null"><p>订单类型：普通订单</p> </div>

    
    
    <div class="tbhead"><p>下单时间：{{item.orderPayTime}}</p></div>
    <div class="tbhead"><p>收货人：{{item.address.addressName}}</p></div>
    <div class="tbhead"><p>联系方式：{{item.address.addressPhone}}</p></div>
    </div>

    <div class="order_tb">
      <div class="w40 order_spname">
        
         <el-image :src="item.goods.goodsImg"></el-image>
        
         <div class="opd" ><p>{{item.goods.goodsName}}</p>
              <p>{{item.goods.goodsDesc}}</p>
         </div>
      </div>
      
      <div class="w12 opd">￥{{item.orderGoodsPrice}}</div>
      <div class="w12 opd">{{item.orderGoodsNum}}</div>
      <div class="w12 opd">￥{{item.orderGoodsPrice*item.orderGoodsNum}}</div>

      <div class="w12 opd" v-if="item.orderIsDone==0"><p>未完成</p></div>
      <div class="w12 opd" v-if="item.orderIsDone==null"><p>未完成</p></div>
      <div class="w12 opd" v-if="item.orderIsDone==1"><p>已完成</p></div>
      <div class="w12 opd" v-if="item.orderIsDone==2"><p>退款申请中</p></div>
      <div class="w12 opd" v-if="item.orderIsDone==3"><p>已退款</p></div>
      
      
      <div class="w12 opd">
        <el-button type="primary"   @click="details(item.orderId,item.orderIsDone)">查看详情</el-button></div>
      
    </div>
    
  </div>
  

    </div>

     <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="order.length">
    </el-pagination>
  </div>
  </div>
</template>

<script>
export default {
name : "order",

data() {
      return {
        options: [
          {
            value:-1,
            label:'全部'
          },
          {
          value: 0,
          label: '未完成'
        }, {
          value: 1,
          label: '已完成'
        }, {
          value: 2,
          label: '退款申请中'
        }, {
          value: 3,
          label: '已退款'
        }
        ],
        order:[],
     

        value: '',
        ordercode:'',
        addressname:'',
        currentPage:1,
      }
    },
methods: {
  // 搜索
 q_search:function(ordercode,addressname,value,currentPage){
 this.$axios.post('/api/order/orderList?page='+currentPage+'&orderCode='+ordercode+'&addressName='+addressname+'&orderIsDone='+value).then((res)=>{
    this.order=res.data.data;
    // console.log(this.order) 
 }).catch((err)=>{console.log("失败")})

  },
  //订单详情
  details:function(orderId,orderIsDone){
   if(orderIsDone==0){
      this.$router.push({path:'order_details',query:{orderId:orderId}})
   }
   else if(orderIsDone==1){
      this.$router.push({path:'order_details',query:{orderId:orderId}})
   }
  else if(orderIsDone==2){
      this.$router.push({path:'refunddetails',query:{orderId:orderId}})
   }
    else if(orderIsDone==3){
      this.$router.push({path:'refunddetails',query:{orderId:orderId}})
   }
    
  },
  handleSizeChange(val) {
         this.currentPage=val
        //  console.log(val)
         this.$axios.post('/api/order/orderList?page='+val).then((res)=>
    {
      this.order=res.data.data;
      
      // console.log(res.data)
      // console.log(this.order)  
    }).catch((err)=>{console.log("失败")})
      },
      handleCurrentChange(val) {
      this.currentPage=val
           this.currentPage=val
        //  console.log(val)
         this.$axios.post('/api/order/orderList?page='+val).then((res)=>
    {
      this.order=res.data.data;
      
      // console.log(res.data)
      // console.log(this.order)  
    }).catch((err)=>{console.log("失败")})

      }
},


created(){
    this.$axios.post('/api/order/orderList?page='+this.currentPage).then((res)=>
    {
      this.order=res.data.data;
      
      // console.log(res.data)
      // console.log(this.order)  
    }).catch((err)=>{console.log("失败")})
  }
}
</script>

<style  scoped>
*{
    padding: 0px;
    margin: 0px;
}
.tbhead>p{
margin-left: 30px;
}
.el-input{
    width: 200px;
}
.order_Search_box>div{
    margin-left: 25px;
    display: flex;
     align-items: center;
}
.tb_tybd:hover{
background-color: #F5F7FA;
}
.order_Search_box{
    height: 100px;
    display: flex;
    align-items: center;
    border-bottom: 10px #F5F7FA solid;
}
.el-image{
  margin-top:20px ;
  margin-left: 100px;
  margin-right: 20px;
    width: 120px;
    height: 60px;
}

.tbhead_head{
  margin-top: 20px;
  width: 100%;

  background-color: #F7F9FA;
  text-align: center;
  line-height: 40px;
  height: 40px;
}
.tbhead{
  
    float: left;
    font-size: 15px ;
    font-weight:bold;
    color: #666666;
}
.w40{
  width: 35%;
}
.w12{
  width: 12%;
}
.order_tb,.order_spname{
  overflow: hidden;
}
.order_tb>div,.order_spname>div{
  float: left;
  
}
.order_spname{
  height: 100px;
}
.tb_tybd{
  margin-top: 10px;
  width: 100%;
  text-align: center;
  border-bottom: solid 1px  #ebeef5;
}

.opd{
  margin-top: 30px;
}


</style>
